<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chrome MCP - AI驱动的浏览器自动化</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .feature-card {
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.9);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            border-radius: 8px;
            padding: 1rem;
            font-family: 'Consolas', 'Monaco', monospace;
        }
        .step-number {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        .floating-icon {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .text-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .section-divider {
            height: 2px;
            background: linear-gradient(to right, transparent, #667eea, #764ba2, transparent);
            margin: 3rem 0;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-6">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-12">
                <div class="floating-icon inline-block mb-6">
                    <i class="fab fa-chrome text-6xl"></i>
                </div>
                <h1 class="text-5xl font-bold mb-4">Chrome MCP</h1>
                <p class="text-xl mb-8 opacity-90">让AI成为你的浏览器助手，开启智能自动化新纪元</p>
                <div class="flex justify-center space-x-4">
                    <a href="https://github.com/hangwin/mcp-chrome" target="_blank" class="bg-white text-purple-700 px-6 py-3 rounded-full font-semibold hover:bg-opacity-90 transition">
                        <i class="fab fa-github mr-2"></i>GitHub
                    </a>
                    <button class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition">
                        <i class="fas fa-play mr-2"></i>快速开始
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction -->
    <section class="py-16 px-6">
        <div class="max-w-4xl mx-auto">
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <p class="text-lg leading-relaxed text-gray-700 mb-6">
                    Chrome MCP是一个基于Chrome扩展的模型上下文协议(MCP)服务器，它将Chrome浏览器功能暴露给AI助手（如Claude），使AI能够执行复杂的浏览器自动化、内容分析和语义搜索。
                </p>
                <div class="bg-purple-50 border-l-4 border-purple-500 p-4 rounded">
                    <p class="text-purple-800">
                        <i class="fas fa-lightbulb mr-2"></i>
                        想象一下：让AI助手直接操作你的浏览器，帮你完成重复性工作！
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Core Features -->
    <section class="py-16 px-6 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-4xl font-bold text-center mb-12">
                <span class="text-gradient">核心功能</span>
            </h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="feature-card p-6 rounded-xl shadow-lg">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-window-restore"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">浏览器管理</h3>
                    <p class="text-gray-600">允许AI列出、操作和控制浏览器窗口与标签页</p>
                </div>
                <div class="feature-card p-6 rounded-xl shadow-lg">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-search"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">内容分析</h3>
                    <p class="text-gray-600">支持AI对网页内容进行语义搜索、提取HTML/文本内容、识别可交互元素</p>
                </div>
                <div class="feature-card p-6 rounded-xl shadow-lg">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-network-wired"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">网络监控</h3>
                    <p class="text-gray-600">捕获网络请求与响应，分析API结构，发送自定义HTTP请求</p>
                </div>
                <div class="feature-card p-6 rounded-xl shadow-lg">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-mouse-pointer"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">交互能力</h3>
                    <p class="text-gray-600">模拟点击、表单填写、键盘输入等用户操作</p>
                </div>
                <div class="feature-card p-6 rounded-xl shadow-lg">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-database"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">数据管理</h3>
                    <p class="text-gray-600">搜索浏览历史、管理书签等浏览器数据</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Architecture Diagram -->
    <section class="py-16 px-6">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-4xl font-bold text-center mb-12">
                <span class="text-gradient">系统架构</span>
            </h2>
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <div class="mermaid">
                    graph LR
                        A[AI助手<br/>Claude/ChatGPT] -->|MCP协议| B[Chrome MCP Bridge<br/>:12306]
                        B -->|扩展API| C[Chrome扩展]
                        C -->|控制| D[Chrome浏览器]
                        D -->|网页内容| E[目标网站]
                        
                        style A fill:#667eea,stroke:#fff,color:#fff
                        style B fill:#764ba2,stroke:#fff,color:#fff
                        style C fill:#9f7aea,stroke:#fff,color:#fff
                        style D fill:#4299e1,stroke:#fff,color:#fff
                        style E fill:#48bb78,stroke:#fff,color:#fff
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases -->
    <section class="py-16 px-6 bg-gray-50">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-4xl font-bold text-center mb-12">
                <span class="text-gradient">使用场景</span>
            </h2>
            <div class="space-y-6">
                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
                    <div class="flex items-start">
                        <div class="step-number mr-4">1</div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">网页内容总结与可视化</h3>
                            <p class="text-gray-600">AI可以分析当前页面内容，然后自动控制Excalidraw绘制相关图表辅助理解</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
                    <div class="flex items-start">
                        <div class="step-number mr-4">2</div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">网页样式修改与广告移除</h3>
                            <p class="text-gray-600">AI能注入脚本修改网页样式，去除广告元素</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition">
                    <div class="flex items-start">
                        <div class="step-number mr-4">3</div>
                        <div>
                            <h3 class="text-xl font-bold mb-2">API分析与网络监控</h3>
                            <p class="text-gray-600">帮助开发者分析特定网站的API结构和响应格式</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages -->
    <section class="py-16 px-6">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-4xl font-bold text-center mb-12">
                <span class="text-gradient">独特优势</span>
            </h2>
            <div class="bg-white rounded-2xl shadow-xl p-8">
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="text-center">
                        <div class="text-5xl text-purple-600 mb-4">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">极速响应</h3>
                        <p class="text-gray-600">无需启动独立浏览器进程，直接利用已打开的Chrome</p>
                    </div>
                    <div class="text-center">
                        <div class="text-5xl text-purple-600 mb-4">
                            <i class="fas fa-user-shield"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">保留状态</h3>
                        <p class="text-gray-600">完整保留用户的登录状态和环境设置</p>
                    </div>
                </div>
                <div class="section-divider"></div>
                <p class="text-lg leading-relaxed text-gray-700">
                    与基于Playwright的MCP服务器相比，Chrome MCP启动速度更快，响应更迅速，且能完全访问Chrome原生API，提供更丰富的功能。
                </p>
            </div>
        </div>
    </section>

    <!-- Getting Started -->
    <section class="py-16 px-6 bg-gray-50">
        <div class="max-w-4xl mx-auto">
            <h2 class="text-4xl font-bold text-center mb-12">
                <span class="text-gradient">快速上手</span>
            </h2>
            <div class="space-y-4">
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <div class="flex items-center mb-4">
                        <div class="step-number mr-4">1</div>
                        <h3 class="text-lg font-bold">下载Chrome扩展</h3>
                    </div>
                    <p class="text-gray-600 ml-14">从GitHub releases页面下载最新Chrome扩展</p>
                </div>
                <div class="bg-white rounded-xl shadow-lg p-6">
                    <div class="flex items-center mb-4">
                        <div class="step-number mr-4">2</div>
                        <h3 class="text-lg font-bold">安装MCP Bridge</h3>
                    </div>
                    <div class="ml-14">
                        <p class="text-gray-600 mb-2">全局安装mcp-chrome-bridge：</p>
                        <div class="code-block">npm install -g m